import "./index.less";
import {connect} from "react-redux";
import {fetch, clientInfoSet} from "../../stores/action";
import {SUBJECT, PAGE_SUBJECT} from "../../stores/subject";
import {Url, md5Url} from  '../../libs/Url';
import {Fetch} from "../../libs/";
import React from 'react'
import CSS from '../../libs/CSS'
import {Scrollbars} from 'react-custom-scrollbars'
import {home} from '../../libs/ResManager'
import {parseSearch} from  '../../libs/utils';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 1,
            photo: 1,
            data: {
                list: [],
                daytopic: {},
                announces: {},
                photos: []
            }
        }
    }

    componentWillMount() {
        const {dispatch} = this.props;
        // dispatch(fetchUser()) //获取登录用户信息
        //url search : {clientid:'',type:'window',brower:'',version:''}
        let clientInfo = parseSearch();

        if (this.props.clientInfo && !_.isEmpty(this.props.clientInfo)) {

        } else {
            if (clientInfo && clientInfo.clientid) {
                Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                    .then((res)=> {
                        if (res['class'] && res['class'].classid) {
                            // clientInfo.classid = res['class'].classid;
                            //
                            clientInfo['class'] = res['class'];
                            clientInfo['school'] = res['school'];
                            clientInfo['device'] = res['device'];
                            clientInfo['classroom'] = res['classroom'];
                            dispatch(clientInfoSet(clientInfo));
                            // Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                            dispatch(fetch({url: Url.HOME, classid: res['class'].classid}));
                        } else {
                            alert('设备码没有跟班级对应，请核验!')
                        }
                    })
                    .catch(e=> {
                        console.log(e)
                    })
            } else {
                alert('设备码不合法，请核验!')
            }
        }
    }

    componentDidMount() {

    }

    _parseHtml(str = '') {
        return str.replace(/<[^>]+>/g, "");
    }

    render() {
        let data = this.props[md5Url.HOME];
        data = data.list ? data : {
            list: [],
            daytopic: {},
            announces: {},
            photos: []
        };
        return (
            <div className="home clearfix" style={{}}>
                <div className="panel-item panel1">
                    <a className="title" href="javascript:void(0);"
                       style={{
                           background: 'url(' + require('./../../imgs/home/home_titBg1.png') + ')',
                           width: (4.5 * 326 / 67) + 'rem',
                           backgroundSize: '100% 100%',
                       }}>今日信息</a>
                    <div className="black-board"
                         style={{
                             background: 'url(' + require('./../../imgs/home/home_notice_bg.png') + ')',
                             backgroundSize: '100% 100%',
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}>
                        {this.state.active == 1 ?
                            <ul className="tabs clearfix">
                                <li>
                                    <a className={'active'} onClick={()=> {
                                        this.setState({active: 1})
                                    }} href="javascript:void(0)">公告通知</a>
                                </li>
                                <li>
                                    <a className={''} onClick={()=> {
                                        this.setState({active: 2})
                                    }} href="javascript:void(0)">每日一新</a>
                                </li>
                            </ul>
                            :
                            <ul className="tabs clearfix">
                                <li>
                                    <a className={''} onClick={()=> {
                                        this.setState({active: 1})
                                    }} href="javascript:void(0)">公告通知</a>
                                </li>
                                <li>
                                    <a className={'active'} onClick={()=> {
                                        this.setState({active: 2})
                                    }} href="javascript:void(0)">每日一新</a>
                                </li>
                            </ul>
                        }
                        {this.state.active == 1 ? <div className="tabs-content">
                            <p>
                                {CSS.textLimit(CSS.parseHtml(data.announces.summary), 100)}
                            </p>
                            <p>学校办 <br/>
                                <span>
                                    {data.announces.intime ? '2016年12月30日' : Moment(data.announces.intime).format('YYYY年M月D日')}
                                    </span>
                            </p>
                        </div> : ''}
                        {this.state.active == 2 ? <div className="tabs-content">
                            <p>
                                {CSS.textLimit(CSS.parseHtml(data.daytopic.comment), 140)}
                            </p>
                        </div> : ''}
                    </div>
                </div>
                <div className="panel-item panel2">
                    <a className="title" href="javascript:void(0);"
                       style={{
                           background: 'url(' + require('./../../imgs/home/home_titBg2.png') + ')',
                           width: (4.5 * 326 / 67) + 'rem',
                           backgroundSize: '100% 100%',
                       }}>班级相册</a>
                    <div className="photo-board"
                         style={{
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}
                    >
                        <div style={{
                            backgroundImage: CSS.parseBackgroundImage(data.photos[this.state.photo - 1] ?
                                Url.FUN_UPLOAD_PREVIEW(data.photos[this.state.photo - 1]['photoid']) :
                                home.defaultImage),
                            backgroundSize: '100% 100%',
                            backgroundPosition: 'center'
                        }}>
                        </div>
                        <div className="clearfix">
                            <ul>
                                {
                                    data.photos.map((item, index)=> {
                                        return <li key={index}
                                                   className={this.state.photo == (index + 1) ? 'active' : ''}/>;
                                    })
                                }
                            </ul>
                        </div>
                        <div>
                            <img onClick={()=> {
                                this.setState({photo: (this.state.photo - 1 > 0) ? this.state.photo - 1 : 3})
                            }} src={require('./../../imgs/home/home_class_icon1.png')} alt=""/>
                            <img onClick={()=> {
                                this.setState({photo: (this.state.photo + 1 > 3) ? 1 : this.state.photo + 1})
                            }} src={require('./../../imgs/home/home_class_icon2.png')} alt=""/>
                        </div>
                    </div>
                </div>
                <div className="panel-item panel3">
                    <a className="title" href="javascript:void(0);"
                       style={{
                           background: 'url(' + require('./../../imgs/home/home_titBg3.png') + ')',
                           width: (4.5 * 326 / 67) + 'rem',
                           backgroundSize: '100% 100%',
                       }}>新闻活动</a>
                    <div className="news-board"
                         style={{
                             backgroundSize: '100% 100%',
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}>
                        {
                            data.list.slice(0, 3).map((item, index)=> {
                                return <div key={index} className="item">
                                    {item.classify ? item.classify.name : null}
                                    <span>{CSS.textLimit(item.starttime, 45)}</span>
                                    <p>{item.name || item.title}</p>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.HOME]: state.fetchBySubject[md5Url.HOME]
    }
};

export default connect(select)(Home)